<template>
  <div class="total">
    <HeaderNav />

    <!-- 个人信息 -->
    <div class="user-info">
      <div class="user-detail">
        <span class="avatar">
          <el-avatar size="large" :src="userInfo.avatar" />
          <span class="name">
            <span>{{ userInfo.name }}</span>
            <span
              >图片数：{{ userInfo.num1 }}&nbsp;&nbsp;&nbsp;&nbsp; 收藏夹数：{{
                userInfo.num2
              }}</span
            >
          </span>
        </span>
        <span class="settings">
          <el-button :icon="Edit" round color="#5fc5ba" plain
            >修改个人信息</el-button
          >
        </span>
      </div>
    </div>

    <!-- 分割线 -->
    <div class="separation"></div>

    <!-- 收藏夹 -->
    <div class="favorites">
      <div class="bar">
        <div class="bar-left">
            <span>收藏夹{{userInfo.num2}}</span>
            <span>喜欢{{userInfo.num3}}</span>
            <span>图片{{userInfo.num1}}</span>
        </div>
        <div class="bar-right"></div>
      </div>
      <div class="content">

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Edit } from "@element-plus/icons-vue";
import HeaderNav from "@/components/common/HeaderNav.vue";

const userInfo = reactive({
  avatar:
    "https://img2.woyaogexing.com/2022/07/09/5ad8b0a6962a1989!400x400.jpg",
  name: "UserName",
  num1: "134",
  num2: "12",
  num3:'340'
});
</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
span {
  cursor: pointer;
}

.total {
  position: absolute;
  top: $item-height;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;

  .user-info {
    height: 1.2rem;
    width: 100%;
    .user-detail {
      margin-left: 0.4rem;
      padding: 0.2rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      flex-direction: column;

      .avatar {
        display: flex;
        align-items: center;
        height: 0.2rem;
        .name {
          margin-left: 0.1rem;
          font-size: 0.1rem;
          display: flex;
          flex-direction: column;

          & > span:last-child {
            font-size: 0.07rem;
          }
        }
      }
      .settings {
        margin-top: 0.5rem;
      }
    }
  }

  .separation {
    height: 0.1rem;
    box-shadow: 0 0.003rem 0 grey;
  }
  .favorites {
    height: auto;
    width: 100%;
    background-color: burlywood;

    .bar {
      &-left {
        float: left;
        width: 2rem;
      }

      &-right {
        float: right;
        width: 2rem;
      }
    }


    .content{

    }
  }
}
</style>
